<template>
  <view class="home">
    <up-tabs :scrollable="false" lineColor="#EF2F17" v-model:current="current" @change="changeTab"
      :list="list"></up-tabs>
    <view class="nav-box u-flex-y-center u-flex-between u-m-t-20"
      @click="$u.route('/pages/index/couponExchange?type=1')">
      <view class="u-flex-y-center">
        <image src="@/static/images/01_11de.png" class="nav-lw" mode=""></image>
        <text>优惠券兑换</text>
      </view>
      <image src="@/static/images/mv_tuichu.png" class="nav-more" mode=""></image>
    </view>
    <up-empty mode="car" icon="/static/images/01_16gjk.png" v-if="!list.length" text="暂无优惠券" width="105" height="97"
      marginTop="100">
    </up-empty>
    <block v-for="(item,index) in coupon_list" :key="item.id">
      <coupon-item :item="item" :type="current == 0?4:1" @getList="changeTab"></coupon-item>
    </block>
  </view>
</template>

<script setup>
  import { couponAllList, couponList } from '../../config/api';
  import couponItem from './components/coupon-item.vue';
  import {
    computed,
    ref
  } from 'vue';
  import { onShow, onReachBottom } from '@dcloudio/uni-app'
  const current = ref(0)
  const list = ref([{
      name: '全部',
      status: ''
    },
    {
      name: '未使用',
      status: 0
    },
    {
      name: '已使用',
      status: 1
    },
    {
      status: 2,
      name: '已过期'
    },
  ])
  const coupon_list = ref([])
  const params = ref({
    page: 1,
    limit: 15,
    status: computed(() => list.value[current.value].status)
  })
  onShow(() => {
    if (current.value == 0) {
      _couponAllList()
    } else {
      _couponList()
    }
  })
  onReachBottom(() => {
    params.value.page++
    if (current.value == 0) {
      _couponAllList()
    } else {
      _couponList()
    }
  })
  const changeTab = () => {
    if (current.value == 0) {
      _couponAllList()
    } else {
      _couponList()
    }
  }
  // 全部优惠券列表
  const _couponAllList = () => {
    couponAllList(params.value).then(res => {
      console.log(res)
      if (params.value.page == 1) coupon_list.value = res.data.data
      else coupon_list.value = coupon_list.value.concat(res.data.data)
    })
  }
  // 优惠券列表
  const _couponList = () => {
    couponList(params.value).then(res => {
      console.log(res)
      if (params.value.page == 1) coupon_list.value = res.data.data
      else coupon_list.value = coupon_list.value.concat(res.data.data)
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    min-height: 100vh;
    background: #f7f6fa;
  }

  .nav-box {
    font-size: 30rpx;
    font-weight: 800;
    color: #000;
    padding: 16rpx 24rpx;
    background: #fff;

    .nav-lw {
      width: 60rpx;
      height: 54rpx;
      margin-right: 16rpx;
    }

    .nav-more {
      width: 20rpx;
      height: 34rpx;
      transform: rotate(180deg);
    }
  }
</style>